<template>
    <uni-popup ref="upgrade" type="center" :is-mask-click="isMaskClick">
        <view class="container">
            <view class="header">
                <image class="img" src="/static/images/upgrade.png" />
            </view>
            <view class="body">
                <view class="content">
                    <view class="title">发现新版本</view>
                    <view class="box">
                        <view class="item" v-for="msg in desc">
                            <view class="dot"></view>
                            <view class="text">{{msg}}</view>
                        </view>
                    </view>
                </view>
                <view class="primary" @click="hdUpgrade">更新</view>
                <view class="second" @click="" v-if="!isForce">暂不更新</view>
            </view>
        </view>
    </uni-popup>
</template>

<script lang="ts" setup>
    import { ref } from 'vue'

    const props = defineProps({
        isForce: {
            type: Boolean,
            default: true
        },
        isMaskClick: {
            type: Boolean,
            default: false
        },
        desc: {
            type: Array,
            default: []
        }
    })
    const emit = defineEmits(['upgrade'])
    const upgrade = ref()
    const hdUpgrade = () => {
        emit('upgrade')
    }
    const open = () => {
        if (props.isForce) {
            uni.hideTabBar()
        }
        upgrade.value.open()
    }
    const close = () => {
        upgrade.value.close()
        if (props.isForce) {
            uni.showTabBar()
        }
    }
    defineExpose({
        open, close
    })
</script>

<style lang="scss" scoped>
    .container {
        margin: 0 100rpx;

        & .header {
            background-color: #fff;
            border-top-left-radius: 50rpx;
            border-top-right-radius: 50rpx;

            & .img {
                display: block;
                width: 550rpx;
                height: 260rpx;
                transform: translateY(-70rpx);
            }
        }

        & .body {
            width: 550rpx;
            padding-bottom: 10px;
            background-color: #FFF;
            border-bottom-left-radius: 12rpx;
            border-bottom-right-radius: 12rpx;

            & .content {

                & .title {
                    transform: translateY(-30rpx);
                    text-align: center;
                    font-size: 20px;
                    color: #363636;
                    font-weight: bold;
                }

                & .box {
                    min-height: 50rpx;
                    max-height: 300rpx;
                    margin-bottom: 20px;
                    overflow-y: auto;

                    & .item {
                        display: flex;
                        align-items: center;
                        padding-left: 100rpx;
                        line-height: 40rpx;

                        & .dot {
                            width: 12rpx;
                            height: 12rpx;
                            background-color: #D8D8D8;
                            border-radius: 6rpx;
                        }

                        & .text {
                            font-size: 26rpx;
                            margin-left: 8rpx;
                            color: #626262;
                            font-weight: 400;
                        }
                    }
                }
            }

            & .primary {
                padding: 24rpx 0;
                margin: 10rpx 30rpx;
                background-color: #33aafc;
                border-radius: 40rpx;
                text-align: center;
                font-size: 32rpx;
                color: #FFF;
                font-weight: bold;
            }

            & .second {
                padding: 24rpx 0;
                margin: 10rpx 30rpx;
                background-color: #FFF;
                text-align: center;
                font-size: 32rpx;
                color: #929292;
                font-weight: bold;
            }
        }
    }
</style>